// 滚动区域 列表页面
<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <div v-if="!errorShow">
        <view-list v-if="field === 'view'" :viewDatas="listDatas"></view-list>
        <food-list v-if="field === 'food'" :foodDatas="listDatas"></food-list>
        <hotel-list
          v-if="field === 'hotel'"
          :hotelDatas="listDatas"
        ></hotel-list>
        <massage-list
          v-if="field === 'massage'"
          :massageDatas="listDatas"
        ></massage-list>
        <ktv-list v-if="field === 'ktv'" :ktvDatas="listDatas"></ktv-list>
        <loading :loadingShow="loadingShow"></loading>
      </div>
      <error :errorShow="errorShow"></error>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { ListModel } from "models/list";
import { mapState } from "vuex";
import tools from "utils/tools";

//引入组件
import ViewList from "./ViewList/Index";
import FoodList from "./FoodList/Index";
import HotelList from "./HotelList/Index";
import MassageList from "./MassageList/Index";
import KtvList from "./KtvList/Index";

import Loading from "./Sub/Loading";
import Error from "./Sub/Error";

export default {
  name: "ListScrollWrapper",
  components: {
    ViewList: ViewList,
    FoodList: FoodList,
    HotelList: HotelList,
    MassageList: MassageList,
    KtvList: KtvList,
    Loading: Loading,
    Error: Error,
  },
  data: function () {
    return {
      loadingShow: true,
      errorShow: false,
      listDatas: [],
    };
  },
  computed: {
    ...mapState(["cityId", "field"]),
  },
  mounted: function () {
    this.scroll = new BetterScroll(this.$refs.wrapper);
    this.getListDatas(this.cityId, this.field);
  },
  watch: {
    // 兄弟组件传值，监听数据重新请求数据
    cityId: function () {
      this.getListDatas(this.cityId, this.field);
    },
  },
  methods: {
    getListDatas: function (cityId, field) {
      this.listDatas = [];
      this.loadingShow = true;
      const listModel = new ListModel();
      listModel.getListDatas(cityId, field).then((res) => {
        // console.log(res);
        /**
         * view:
         * {
         *   data: [
         *     {
         *       address: "盐田区大梅沙...",
         *       city_id: "4",
         *       city_mark: "shenzhen",
         *       city_name: "深圳",
         *       default_price: "200",
         *       id: "16",
         *       img: "https://...jpg",
         *       intro: "有刺激的游乐项目...",
         *       name: "东部华侨城(5A)",
         *       open_datetime: "1月1日-12月31日...",
         *       pics: "[\"https://p...jpg\",\"https://...jpg\",...]",
         *       score: "4.1",
         *       star: "4",
         *       status: "1",
         *       ticket_info: "儿童 身高1.2米...",
         *       tip: "最佳游玩时间：四季皆宜,\r\n建议游玩时长
         *     },
         *     ...
         *   ]
         * }
         *
         * food:
         * {
         *   data: [
         *     {
         *       address: "盐田区大梅沙...",
         *       area: "海岸城/保利"
         *       city_id: "4",
         *       city_mark: "shenzhen",
         *       city_name: "深圳",
         *       comment_keyword: "味道赞1981,上菜快258,..."
         *       default_price: "200",
         *       field: "特色火锅"
         *       id: "16",
         *       img: "https://...jpg",
         *       keyword: "海岸城/保利火锅人气榜第5名,...",
         *       name: "东部华侨城(5A)",
         *       open_datetime: "1月1日-12月31日...",
         *       pics: "[\"https://p...jpg\",\"https://...jpg\",...]",
         *       recom: "原味椰子鸡,超级腊味饭,特色竹笙椰子鸡,..."
         *       score: "4.1",
         *       star: "4",
         *       status: "1"
         *     },
         *     ...
         *   ]
         * }
         *
         * hotel:
         * {
         *   data: [
         *     {
         *       address: "盐田区大梅沙...",
         *       area: "海岸城/保利"
         *       city_id: "4",
         *       city_mark: "shenzhen",
         *       city_name: "深圳",
         *       default_price: "200",
         *       id: "16",
         *       img: "https://...jpg",
         *       name: "东部华侨城(5A)",
         *       pics: "[\"https://p...jpg\",\"https://...jpg\",...]",
         *       service: "{\"parking\": true, \"wifi\": true}",
         *       score: "4.1",
         *       star: "4",
         *       status: "1",
         *       style: "舒适型"
         *     },
         *     ...
         *   ]
         * }
         *
         * massage:
         * {
         *   data: [
         *     {
         *       address: "盐田区大梅沙...",
         *       city_id: "4",
         *       city_mark: "shenzhen",
         *       city_name: "深圳",
         *       comment_keyword: "技师专业344,服务热情28,...",
         *       default_price: "200",
         *       id: "16",
         *       img: "https://...jpg",
         *       name: "东部华侨城(5A)",
         *       open_datetime: "周一至周日 全天",
         *       pics: "[\"https://p...jpg\",\"https://...jpg\",...]",
         *       score: "4.1",
         *       service: "{\"parking\": true, \"wifi\": true}",
         *       star: "4",
         *       status: "1"
         *     },
         *     ...
         *   ]
         * }
         *
         * ktv:
         * {
         *   data: [
         *     {
         *       address: "盐田区大梅沙...",
         *       area: "新洲/石厦",
         *       city_id: "4",
         *       city_mark: "shenzhen",
         *       city_name: "深圳",
         *       default_price: "200",
         *       id: "16",
         *       img: "https://...jpg",
         *       name: "东部华侨城(5A)",
         *       pics: "[\"https://p...jpg\",\"https://...jpg\",...]",
         *       score: "4.1",
         *       service: "{\"parking\": true, \"wifi\": true}",
         *       star: "4",
         *       status: "1"
         *     },
         *     ...
         *   ]
         * }
         */

        if (res && res.status === 0) {
          //处理格式
          const data = tools.formatJSON(res.data, "keyword");
          // setInterval(() => {
          //   }, 500);
          this.errorShow = false;
          this.listDatas = data;
          this.loadingShow = false;
        } else {
          this.errorShow = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~styles/mixins.scss";
@import "~styles/variables.scss";

.header {
  @include flex-row;
  height: $headerHeight;
  background-color: $defaultBgColor;
}
</style>